<!DOCTYPE html>
<html class="pixel-ratio-1"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!-- <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="format-detection" content="telephone=no">
    <meta name="referrer" content="no-referrer" />
    
    <title>生成海报</title>
    <link rel="stylesheet" href="__PUBLIC__/index/files/weui.css">
    <link rel="stylesheet" href="__PUBLIC__/index/files/jquery-weui.css">
    <link rel="stylesheet" href="__PUBLIC__/index/files/cropper.css">
    <link rel="stylesheet" href="__PUBLIC__/index/files/myCrop.css">
    <link rel="shortcut icon" href="https://vote.eyuyao.com/public/favicon.ico">
    <style type="text/css">
        html{max-width: 640px;margin: auto;background: #edecf2;}
        .clear{clear:both;}
        .compute-height{width:100%;max-width: 640px;}
        #generate {
            background:url("__PUBLIC__/index/files/poster-bg.jpg");
            background-size:100%;
            -moz-background-size:100%; /* 老版本的 Firefox */
            background-repeat:no-repeat;
            width: 100%;
            height:650px;
        }
    </style>
</head>

<body onresize="change_resize();">
<div id="generate" >
   <!--  <img src="__PUBLIC__/index/files/poster-bg.jpg" style="width:100%;float:left;"> -->
    <div style=" padding:40%  0px 100px 0px; text-align: center; color: rgb(204, 204, 204);" class="compute-height" data-old-top="200" id="photo_btn_2" onclick="">
        <input id="inputImage" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" style="display: none;" type="file">
        <div style="width:80px;font-size: 30px; margin: auto;">选择头像</div>
    </div>

    <div id="showImg-d" style="padding-top:25%; display: none;" class="compute-height" data-old-top="140">
        <div style="width: 80%;  margin: auto;">
            <img id="showImg" style="width: 100%; float: left;" src="">
            <div style="clear: both;"></div>
        </div>
    </div>

     <div style="margin-left: 20%; margin-top: 10px;" data-old-top="400">
        <div style="font-size:12px;">大家好，我们是</div>
        <div style="font-size:20px;">{$active.contestant_number}号   {$active.nickname}</div>
        <div style="font-size:12px;color:red;width:90px;">我们的口号是：</div>
        <div style="font-size:12px;">{$active.xuanyan}</div>
    </div>

    <div style="" class="compute-height" data-old-top="400">
        <div style="width:17%;position: absolute;right:64%; margin-top: 5px;">
            <img src="{$url}" style="width:100%;float: left;">
            <div style="clear: both;"></div>
        </div>
    </div>

    <div style="position:fixed;left:10px;bottom:0;">
        <!--<div class="item" style="width:50px;margin-bottom: 10px;" onclick="document.getElementById('inputImage').click()">
            <img src="/public/index/images/kaishu/select.png" style="width: 100%;float: left;"/>
            <div class="clear"></div>
        </div>-->
        <div class="item" style="width:50px;margin-bottom: 10px;" id="photo-btn">
            <img src="__PUBLIC__/index/files/select.png" style="width: 100%;float: left;">
            <div class="clear"></div>
        </div>
                <div class="item" style="width:50px;margin-bottom: 10px;" id="create-poster-btn">
            <img src="__PUBLIC__/index/files/share.png" style="width: 100%;float: left;">
            <div class="clear"></div>
        </div>
                <div class="item" style="width:50px;margin-bottom: 10px;" onclick="history.go(-1);">
            <img src="__PUBLIC__/index/files/index.png" style="width: 100%;float: left;">
            <div class="clear"></div>
        </div>
    </div>
    <div style="position: absolute; bottom: 3px; right: 10px; color:red; "><b> ———> &nbsp; iphone手机请自行截图分享</b></div>
</div>

<div id="photo" class="weui-popup__container" style="display: none;">
    <div class="weui-popup__modal">
        <div style="position: absolute;top:0;left:0;">
            <div class="row" id="imgEdit">
                <div class="col-md-9">

                    <div class="img-container">

                    <img src="__PUBLIC__{$active.images2}" alt="Picture" class="cropper-hidden" >

        <!--        <img src="__PUBLIC__/index/files/1519455562113416242.jpg" alt="Picture" class="cropper-hidden" >  -->

                    
                        <div class="cropper-container cropper-bg" style="width: 1233px; height: 678px;">
                        <div class="cropper-wrap-box">
                            <div class="cropper-canvas" style="width: 508.5px; height: 678px; left: 413.1px; top: 11px;"></div>
                        </div>
                        <div class="cropper-drag-box cropper-modal cropper-move" data-action="move"></div>
                            <div class="cropper-crop-box" style="width: 406.8px; height: 406.8px; left: 413.1px; top: 135.6px;">
                                <span class="cropper-view-box"></span>
                                <span class="cropper-dashed dashed-h cropper-hidden"></span>
                                <span class="cropper-dashed dashed-v cropper-hidden"></span>
                                <span class="cropper-center"></span>
                                <span class="cropper-face cropper-move" data-action="move"></span>
                                <span class="cropper-line line-e cropper-hidden" data-action="e"></span>
                                <span class="cropper-line line-n cropper-hidden" data-action="n"></span>
                                <span class="cropper-line line-w cropper-hidden" data-action="w"></span>
                                <span class="cropper-line line-s cropper-hidden" data-action="s"></span>
                                <span class="cropper-point point-e cropper-hidden" data-action="e"></span>
                                <span class="cropper-point point-n cropper-hidden" data-action="n"></span>
                                <span class="cropper-point point-w cropper-hidden" data-action="w"></span>
                                <span class="cropper-point point-s cropper-hidden" data-action="s"></span>
                                <span class="cropper-point point-ne cropper-hidden" data-action="ne"></span>
                                <span class="cropper-point point-nw cropper-hidden" data-action="nw"></span>
                                <span class="cropper-point point-sw cropper-hidden" data-action="sw"></span>
                                <span class="cropper-point point-se cropper-hidden" data-action="se"></span>
                            </div>
                         </div>
                    </div>
                </div>
            </div>
            <div class="row" id="actions" style="padding: 0;margin: 0;width: 100%;position: fixed;bottom: 5px;">
                <div class="col-md-9 docs-buttons">
                    <div class="button_sp_area">
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default close-popup">取消</a>
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" id="getCroppedCanvas" data-method="getCroppedCanvas">确认</a>
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary qiehuan" style="display: none;">换一张</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="__PUBLIC__/index/files/jquery-3.1.1.min.js"></script>
<script src="__PUBLIC__/index/files/jquery-weui.js"></script>
<script src="__PUBLIC__/index/files/cropper.js"></script>
<script src="__PUBLIC__/index/files/myCrop.js"></script>
<script type="text/javascript">
    var ishttps = 'https:' == document.location.protocol ? true: false;
    if(ishttps){
        document.write("<script src='https://static.app1.magcloud.net/public/static/dest/js/libs/magjs-x.js'><\/script>");
    }else{
        document.write("<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'><\/script>");
    }
</script>

<script type="text/javascript">

    var fileImg = "";

   // var img = '__PUBLIC__/index/files/1519455562113416242.jpg';

    //var img = images.split(',');
    $('#photo-btn').click(function(){
        $('#photo').popup();
    });
    $('#photo_btn_2').click(function(){
        $('#photo').popup();
    });

    //if (img.length < 2){
       // $('.qiehuan').hide();
    //}

    change_resize();
    //alert($(window).width());
    function change_resize(){

        var width = $(window).width();
        if(width>640){
            width = 640;
        }
        var ratio = width/375;
        $('.compute-height').each(function(i,e){
            var old_top = e.getAttribute('data-old-top');
            e.style.top = parseInt(old_top)*ratio+'px';
        });
    }

    var is_post = 0,img_src = '',times = 0;
 
    $('#create-poster-btn').click(function(){

        // $.alert('暂未完成...');
        // return false;
        times++;
        if(times > 5){
            $.alert('点击过于频繁,请稍候再尝试');
            return false;
        }
        if(is_post == 1){
            return false;
        }
        if(fileImg == ''){
            $.alert('还没有选择图片');
            return false;
        }
        is_post = 1;
        $.showLoading('正在生成图片...');
        $.post('{:url("poster_img")}',{base64:fileImg,contestant_number:'{$active.contestant_number}',active_id:'{$active.active_id}',template:'whdz'},function(data){
                $.hideLoading();
                is_post = 0;

                if(data.code == 0){

                    mag.setData({
                        shareData: {
                            type: 1,
                            imageurl: data.message,
                            picurl: data.message
                        }
                    });
                    mag.share('ALL', function(res){
                        // res : 平台名称
 
                       // alert('success with - '+res);

                        if(res == 'WEIXIN_CIRCLE' || res == 'WEIXIN'){
                            //$.post('/public/index.php/index/poster/ajax_add_vote.html',{res:res,id:'15',p_id:'3546'},function(data){
                                //if(data.code != 0){
                                    $.alert("分享成功");
                                //}
                            //},'json');
                        }else{
                            $.alert('您分享的不是微信');
                        }
                    });
                }else{
                    $.alert('图片生成失败,原因:'+data.message);
                }
            },'json');
    });



function loadImage(url,callback) {       
    var img =new Image();  
    img.onload =function(){  
        img.onload =null;  
        callback(img);  
    }  
    img.src = url;   
}  
  
function call(img){  
    $(img).appendTo('.box');  
}  
// loadImage('http://www.appelsiini.net/projects/lazyload/img/viper_1.jpg',call);  
loadImage('http://touwgf.5iyq0022.com{$active.images2}',call); 
</script>

</body></html>